<!--
 * @Author: cest
 * @Date: 2022-08-27 10:43:05
 * @LastEditTime: 2022-08-27 12:56:25
 * @LastEditors: cest
 * @FilePath: /vite-project/src/App.vue
 * @Description: 编辑描述内容
-->
<script setup lang="ts">
import './assets/stylus/index.styl'
import MultiColumns from './components/multi-columns/multi-columns.vue'
import { useScroll } from '@vueuse/core'
import { ref, toRefs } from 'vue';
const el = ref<HTMLElement | null>(null)
// With offsets
const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
  offset: { top: 30, bottom: 130, right: 30, left: 30 },
})
// const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
const { left, right, top, bottom } = toRefs(arrivedState)
const { left: toLeft, right: toRight, top: toTop, bottom: toBottom } = toRefs(directions)

</script>

<template lang="pug">
.container(ref="el" style="width: ;100vw;height:100vh;overflow-y:overlay")
  nav.margin-4.flex.flex-col.justify-start(style="position: fixed;")
    span left: {{ left }}
    span right: {{ right }}
    span top: {{ top }}
    span bottom: {{ bottom }}
    span toLeft: {{ toLeft }}
    span toRight: {{ toRight }}
    span toTop: {{ toTop }}
    span toBottom: {{ toBottom }}
    span x: {{ x }}
    span y: {{ y }}
    span isScrolling: {{ isScrolling }}
  MultiColumns
</template>